<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>店铺广告</title>
<script type="text/javascript" src="/js/jquery/MSClass.js"></script>
		<style>
			a,body,select,td,b{font-size:12px;text-decoration:none;}
			body{background:#ffffff;}
			a,pre{color:#808080;}
			a:link,a:visited {color:#555;}
			a:hover,a:active { color:#ff4e00;}
			img{border:0}
			.hot_slider{padding:0px;width:550px;border:1px solid #000000;}
			.slider_wrap{position:relative;width:542px;height:260px;margin:4px;overflow: hidden;}
			.mask{FILTER:alpha(opacity=60);opacity:0.6;width:100%;height:64px;background-color:#000000;position:absolute;bottom:0;left:0;display:block;}
			.comt{width:460px;color:#ffffff;position:absolute;left:0;bottom:0;height:64px;text-indent:10px;text-align:left;}
			.comt H3{font-size:20px;margin-top:5px;color: #ffffff;}
			.comt P{font-size:12px;margin-top:5px;margin-bottom:8px;line-height:20px;}
			#slider_box{position:relative;width:460px;height:260px;overflow:hidden;float:left;}
			#contentList li{float:left;position:relative;display:inline;}
			#contentList li IMG{width:460px;}
			#previewList{float:right;position:relative;width:80px;}
			#previewList li{position:relative;float:left;height:64px;margin-top:1px;}
			#previewList li IMG{width:80px;height:64px;}
			#previewList .active .mask{z-index:-1;}
		</style>
</head>
<body>
	<div class="hot_slider"> 
	<div class="slider_wrap"> 
		<div id="slider_box"> 
			<ul id="contentList">
				<s:iterator value="ads" var="ad_list">
					<li>
						<a href="/forward/view/book_browse.go?book.id=${d_list.id }"><img src="${ad_list.logo }" alt="" /></a><div class="mask"></div>
						<div class="comt"> 
							<h3>${ad_list.name }</h3>
							<p>${ad_list.word }</p>
						</div> 
					</li>
				</s:iterator> 
			</ul> 
		</div>
		<ul id="previewList"> 
			<s:iterator value="ads" var="ad_list_min">
				<li><div class="mask"></div><a href="javascript:void(0)"><img src="${ad_list_min.logo }" alt="${ad_list_min.name }" /></a></li>
			</s:iterator>
		</ul> 
	</div> 

</div>
<script type="text/javascript">
new Marquee(
{
	MSClass	  : ["slider_box","contentList","previewList"],
	Direction : 2,
	Step	  : 0.3,
	Width	  : 460,
	Height	  : 260,
	Timer	  : 20,
	DelayTime : 2500,
	WaitTime  : 0,
	ScrollStep: 0,
	SwitchType: 0,
	AutoStart : true
});
</script>
</body>
</html>